<template>
  <div class="root">
    <wux-toptips id="wux-toptips" />
    <div class="root_son">
      <wux-spin nested :spinning="detailSpinning">
        <wux-toptips id="wux-toptips" />
        <img
          :src="(roomGoods.img === undefined || roomGoods.img === '')? defaultImg : roomGoods.img"
          class="product_pic"
        />
        <div class="item_name">
          <div class="item_name_outer">
            <h2>
              {{roomGoods.title}}
              <div class="room-number">
                房间号
                <span class="val">{{roomGoods.roomNumber}}</span>
              </div>
            </h2>
            <span class="dollars">￥</span>
            <span class="money">{{roomGoods.salePrice}}</span>
            <div class="total-amount">
              已售
              <span class="val">{{roomGoods.totalAmount}}</span>
            </div>
          </div>
          <div class="Add_sub">
            <div class="last-amount">使用天数</div>
            <div class="sub add-min" @click="changeAmount(false)">-</div>
            <span type="text" class="info">{{roomGoods.daily}}</span>
            <div class="add add-min" @click="changeAmount(true)">+</div>
          </div>
        </div>
        <div class="profile">
          <div class="profile_outer">
            <h2>商品简介</h2>
            <div class="content">
              <span v-html="roomGoods.content"></span>
            </div>
          </div>
        </div>
      </wux-spin>
      <div class="spend">
        <div class="float_right Shopping_btn">
          <div :class="btnSetGrey ? 'buy_now set-grey' : 'buy_now'" @click="buyNow">立即使用</div>
        </div>
      </div>
    </div>
  </div>
</template>  


<script>
import roomApi from "@/api/room";

import { pay } from "@/api/pay";

import { $wuxToptips } from "../../static/wux/index";

export default {
  data() {
    return {
      roomGoods: {},
      detailSpinning: false,
      defaultImg: '/static/images/unknown.png',
      btnSetGrey: false
    };
  },
  mounted() {
    wx.showShareMenu();
    this.$nextTick(function () {
      this.getRoomGoodsDetail(this.$store.state.productId);
    });
  },
  methods: {
    pay,
    changeAmount(flag) {
      if (JSON.stringify(this.roomGoods) === "{}") {
        return false;
      }
      if (flag) {
        this.$set(this.roomGoods, "daily", (this.roomGoods.daily += 1));
      } else {
        if (this.roomGoods.daily > 1) {
          this.$set(this.roomGoods, "daily", (this.roomGoods.daily -= 1));
        }
      }
    },
    buyNow() {
      if (this.btnSetGrey) {
        return false;
      }
      if (JSON.stringify(this.$store.state.shop) === "{}") {
        wx.showModal({
          title: "提示",
          content: "请先选择门店",
          success: function (res) {
            if (res.confirm) {
              wx.redirectTo({
                url: "/pages/shopList"
              });
            }
          }
        });
        return false;
      }
      if (JSON.stringify(this.roomGoods) === "{}") {
        return false;
      }
      let roomNum = [];
      roomNum.push(this.roomGoods);
      //target:2 客房商品
      let body = {
        totalPrice: this.roomGoods.daily * this.roomGoods.salePrice,
        totalNum: this.roomGoods.daily,
        goodsNum: roomNum,
        target: 2
      };
      this.$store.dispatch("addSubmitGoods", body);
      //跳转订单页面
      this.$router.push({ path: "/pages/SubmitOrder" });
    },
    getRoomGoodsDetail(id) {
      this.detailSpinning = true;
      const self = this;
      this.$http
        .request({
          url: roomApi.getRoomGoods,
          method: "POST",
          body: {
            id: id
          }
        })
        .then(res => {
          res.daily = 1;
          self.roomGoods = res;
          this.detailSpinning = false;
          if (self.roomGoods.status === '1' || self.roomGoods.status === 1) {
            self.btnSetGrey = true;
          } else {
            self.btnSetGrey = false;
          }
        });
    }
  }
};
</script>  

<style scoped lang="less">
.root {
  height: 100vh;
  background: #f3f3f3;
  overflow-y: auto;
  .root_son {
    padding: 0 0 60px 0;
    .product_pic {
      width: 100%;
      height: 300px;
    }
    .item_name {
      padding: 5px 0 10px 0;
      overflow: hidden;
      background: #fff;
      display: flex;
      .item_name_outer {
        flex: 0.7;
        padding: 10px 0 10px 10px;
        h2 {
          font-size: 16px;
          margin-bottom: 5px;
          .room-number {
            font-size: 12px;
            color: #999999;
            .val {
              color: #999999;
              padding-left: 3px;
            }
          }
        }
        p {
          font-size: 12px;
          color: #acacac;
        }
        span {
          color: #c89f62;
          // font-weight: 700;
        }
        .dollars {
          font-size: 12px;
        }
        .money {
          font-size: 16px;
        }
        .total-amount {
          font-size: 12px;
          color: #999999;
          .val {
            color: #c89f62;
            padding: 0 0.5px;
          }
        }
      }
      .Add_sub {
        display: flex;
        flex: 0.3;
        justify-content: center;
        align-items: center;
        padding: 40px 30px 0 0;
        position: relative;
        .last-amount {
          font-size: 12px;
          position: absolute;
          right: 40px;
          top: 0;
          border: none !important;
          margin: 16px 20px 0 0;
        }
        div {
          border: 1px solid #bababa;
        }
        .info {
          border-right: 0;
          border-left: 0;
          text-align: center;
          flex: 1;
        }
        .add {
          background-color: rgb(243, 201, 64);
        }
        .add-min {
          flex: 0.5;
          border-radius: 50%;
          text-align: center;
        }
      }
    }
    .specification {
      padding-top: 5px;
      .specification_outer {
        background: #fff;
        padding: 10px 10px;
        .specification_title {
          font-size: 15px;
          border-bottom: 1px solid #f3f3f3;
          padding-bottom: 10px;
          // font-weight: 700;
        }
        .specification_content {
          position: relative;
          font-size: 13px;
          height: 20px;
          line-height: 20px;
          padding: 10px 0px 0px 10px;
          .pull-right {
            position: absolute;
            line-height: 20px;
            font-size: 20px;
            right: 2px;
          }
        }
      }
    }
    .profile {
      padding: 5px 0 10px 0;
      .profile_outer {
        background: #fff;
        padding: 10px 10px;
        h2 {
          font-size: 15px;
          border-bottom: 1px solid #f3f3f3;
          padding: 5px 0;
          // font-weight: 700;
        }
        .content {
          // font-size: 12px;
          padding: 10px 0 0 0;
          box-sizing: border-box;
          color: #606060;
        }
      }
    }
    .spend {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      background: #fff;
      .Shopping_btn {
        text-align: center;
        line-height: 50px;
        .set-grey {
          background: #acacac !important;
        }
        .buy_now {
          padding: 0 15px;
          height: 50px;
          color: #fff;
          background: #435756;
        }
        .add_cartbtn {
          padding: 0 15px;
          height: 50px;
          color: #fff;
          background: #c89f62;
        }
      }
      .float_left {
        float: left;
      }
      .float_right {
        float: right;
      }
      .addShopping {
        position: relative;
        padding: 10px 5px 0 0;
        margin-left: 10px;
        .shopping_icon {
          width: 35px;
          height: 35px;
        }
        // .shopping_num {
        //   position: absolute;
        //   width: 15px;
        //   height: 15px;
        //   border-radius: 50%;
        //   background: red;
        //   color: #fff;
        //   top: 10px;
        //   right: 0;
        //   font-size: 12px;
        //   text-align: center;
        //   line-height: 15px;
        // }
      }
    }
  }
}
</style>